import { getArtDetail } from '@/api/index';
import Footer from '@/components/footer';
import Hearder from '@/components/header';
import 'github-markdown-css';
import { useEffect, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import './index.less';
function Info(props: any) {
  const { history } = props;
  const { location } = history;
  const { query } = location;
  const [detail, setDetail] = useState<any>(null);
  useEffect(() => {
    getDetail(query);
  }, [query]);
  const getDetail = (data: any) => {
    getArtDetail(data).then((res) => {
      if (res.code === 0) {
        console.log('文章详情', res);
        setDetail(res.data);
      }
    });
  };
  // 时间序列化
  const timeFormat = (tm: string) => {
    if (!tm) return '0000-00-00 00:00:00';
    const d = new Date(tm);
    const year = d.getFullYear();
    const month = change(d.getMonth() + 1);
    const day = change(d.getDate());
    const hour = change(d.getHours());
    const minute = change(d.getMinutes());
    const second = change(d.getSeconds());
    function change(t: number) {
      if (t < 10) {
        return '0' + t;
      } else {
        return t;
      }
    }
    const time =
      year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
    return time;
  };
  return (
    <div className="artinfo">
      <Hearder history={history} />
      <div className="artcontent">
        <div className="title">{detail?.title}</div>
        <div className="artcreate">
          作者：{detail?.create_name}&nbsp;&nbsp;&nbsp;&nbsp;时间：
          {timeFormat(detail?.create_time)}
        </div>
        <div className="markdown-body">
          <ReactMarkdown
            // eslint-disable-next-line react/no-children-prop
            children={detail?.content}
            components={{
              // eslint-disable-next-line @typescript-eslint/no-shadow
              code({ node, inline, className, children, ...props }) {
                const match = /language-(\w+)/.exec(className || '');
                return !inline && match ? (
                  <SyntaxHighlighter
                    // eslint-disable-next-line react/no-children-prop
                    children={String(children).replace(/\n$/, '')}
                    language={match[1]}
                    PreTag="div"
                    {...props}
                  />
                ) : (
                  <code className={className} {...props}>
                    {children}
                  </code>
                );
              },
            }}
          />
        </div>
      </div>
      <Footer />
    </div>
  );
}
export default Info;
